<template>
<div class="resourcecontrolbox">
  <div class="resourcecontrol">
    <el-tooltip
      effect="dark"
      content="时空演进"
      placement="top"
      popper-class="sidebar-poper"
    >
      <div class="timepic" @click="goTime"><img src="@/assets/img/dispath/time.png"></div></el-tooltip>
    <div
      v-for="resource in resourceList"
      :key="resource.name"
      :class="['resource',navRecorce.indexOf(resource.name) > -1 ? 'active' : '']"
      @click="handleResourceClick(resource)"
    >
      <img v-if="navRecorce.indexOf(resource.name) > -1" class="icon" :src="resource.acticeIcon" alt="">
      <img v-else class="icon" :src="resource.icon" alt="">
      <span class="name">{{ resource.name }}</span>
    </div>
  </div>
</div>
</template>

<script>
import personIcon1 from '@/assets/img/bottom/person1.svg';
import personIcon2 from '@/assets/img/bottom/person2.svg';
import videoIcon1 from '@/assets/img/bottom/video1.svg';
import videoIcon2 from '@/assets/img/bottom/video2.svg';
import warningIcon1 from '@/assets/img/bottom/warning1.svg';
import warningIcon2 from '@/assets/img/bottom/warning2.svg';
import exploitationIcon1 from '@/assets/img/bottom/exploitation1.svg';
import exploitationIcon2 from '@/assets/img/bottom/exploitation2.svg';
import watergiveIcon1 from '@/assets/img/bottom/watergive1.svg';
import watergiveIcon2 from '@/assets/img/bottom/watergive2.svg';
import waterdischargeIcon1 from '@/assets/img/bottom/gongdian1.svg';
import waterdischargeIcon2 from '@/assets/img/bottom/gongdian2.svg';
import windIcon1 from '@/assets/img/bottom/wind1.svg';
import windIcon2 from '@/assets/img/bottom/wind2.svg';
// import transportIcon1 from '@/assets/img/bottom/transport1.svg';
// import transportIcon2 from '@/assets/img/bottom/transport2.svg';
// import runlineIcon1 from '@/assets/img/bottom/runline1.svg';
// import runlineIcon2 from '@/assets/img/bottom/runline2.svg';
export default {
  name: 'ResourceControl',
  props: {
    defaultResource: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      navRecorce: [],
      resourceList: [
        {
          icon: personIcon1,
          acticeIcon: personIcon2,
          name: '人员',
          eventOption: 'People',
          sceneName: 'TYDD_RY'
        },
        {
          icon: videoIcon1,
          acticeIcon: videoIcon2,
          name: '监控',
          eventOption: 'JianKong',
          sceneName: 'TYDD_JK'
        },
        {
          icon: exploitationIcon1,
          acticeIcon: exploitationIcon2,
          name: '采掘',
          eventOption: 'CaiJue',
          sceneName: 'TYDD_CJ'
        },
        {
          icon: watergiveIcon1,
          acticeIcon: watergiveIcon2,
          name: '供排水',
          eventOption: 'GShui',
          sceneName: 'TYDD_GPS'
        },
        {
          icon: windIcon1,
          acticeIcon: windIcon2,
          name: '通风',
          eventOption: 'TongFeng',
          sceneName: 'TYDD_TF'
        },
        {
          icon: waterdischargeIcon1,
          acticeIcon: waterdischargeIcon2,
          name: '供电',
          eventOption: 'GongDian',
          sceneName: 'TYDD_GD'
        },
        {
          icon: warningIcon1,
          acticeIcon: warningIcon2,
          name: '事件',
          eventOption: 'Event',
          sceneName: 'TYDD_SJ '
        }
      ]
    };
  },
  watch: {
    defaultResource: {
      handler: function(val) {
        this.navRecorce = val;
      },
      immediate: true
    }
  },
  methods: {
    goTime() {
      this.$router.push({ name: 'time' });

      this.$store.dispatch('postToEngine', { sceneName: 'TYDD_SKYJ', data: { action: 'Play' }});
    },
    handleResourceClick(val) {
      const { name, sceneName } = val;
      const index = this.navRecorce.indexOf(name);
      if (index > -1) {
        this.navRecorce.splice(index, 1);
        this.sendEventToEngine(sceneName, false);
      } else {
        this.navRecorce.push(name);
        this.sendEventToEngine(sceneName, true);
      }
    },

    // 资源上图事件
    sendEventToEngine(option, isSelect) {
      if (!option) return;

      this.$store.dispatch('postToEngine', { sceneName: option, data: isSelect });
    }
  }
};
</script>

<style lang="scss" scoped>
.resourcecontrolbox{
  position: relative;
  z-index: 2;
}
.timepic{
  width: 50px;
  height: 50px;
  background-color: rgba($color: $black, $alpha: 0.4);
  position: absolute;
  bottom: 0;
  left:-70px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius:4px;
  cursor: pointer;
  }
.resourcecontrol{
  position: fixed;
  border-radius: .25rem;
  left: 50%;
  bottom: 40px;
  z-index: 10;
  margin-left: 2.1875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:15px 30px;
  width: 722px;
  height: 3.125rem;
  font-size: 0.875rem;
  color: #D8D8D8;
  transform: translateX(-50%);
  background-color: rgba($color: $black, $alpha: 0.4);
  .resource{
    color: $light2Grey;
    cursor: pointer;
    .icon{
      position: relative;
      top: .25rem;
      margin-right: .625rem;
      width: 1.25rem;
      height: 1.25rem;
    }
    &.active{
      .name{
        color: $cyan;
      }
    }
  }
}
</style>
